<template>
  <div ref="box" class="flange-port">
    <div
      label-width="0"
      class="main-box"
      ref="mainBox">
      <template v-for="(port,index) in dataList">
           <el-divider content-position="left" v-if="port.holeSort === 1" :key="index">{{ port.faceName }}</el-divider>
          <div
            :key="'face' + port.holeId"
            class="port-item mb-10 pr-20">
            <div class="flex align-center">
              <el-checkbox v-model="checkedList.find(item => item.holeId === port.holeId).checked" @change="handleCheckedPortChange($event,port.holeId)"></el-checkbox>
              <div class="sort text-color">
              {{ port.holeSort < 10 ? `0${port.holeSort}` : port.holeSort }}
              </div>
            </div>
            <el-input class="input" v-model="port.holeName" maxlength="60" />
            <el-select class="select" v-model="port.installed">
              <el-option :label="$t('INSTALLED')" :value="true" />
              <el-option :label="$t('UNINSTALLED')" :value="false" />
            </el-select>
          </div>
        </template>
    </div>
    <!--IntersectionObserver 监听portmore出现在视图 加载更多端口-->
    <div class="portmore w-100 h-1"></div>
  </div>
</template>

<script>
  export default {
    name: 'DeviceConfigPortFlange',
    props: {
      installed:{
        type:[String, Boolean],
        default:''
      },
      checkAll:{
        type:Boolean,
        default:false
      },
      cloneDetailData: {
        type: Object,
        default: () => {
          return { odf: {} }
        }
      }
    },
    data() {
      return {
        formData: {},
        height: 300,
        rowHeight: 35,
        offset: 0,
        offsetIndex: 0,
        rowCount: 4,
        dataList:[],
        checkedList:[],
        checkedMore:[],
        page:1,
        size:40
      }
    },
    computed: {
      odfData() {
        let list = []
        try {
          list = this.cloneDetailData.odf.faceList.map(i =>  i.holeList).flat()
          list.forEach(i => {
            this.checkedList.push({
              holeId:i.holeId,
              checked:false
            })
          })
        } catch {}
        return list
      }
    },
    watch:{
      installed(val){
        console.log(val);
        if(val === '')return
         const portid = this.checkedMore.map(item => item.holeId)
         this.dataList.forEach(item => {
          if(portid.includes(item.holeId)){
            item.installed = val
          }
         })
      },
      odfData(newVal) {
        this.dataList = this.odfData.slice(0, this.page *this.size)
      }
    },
    created(){
      console.log(this.odfData);
      this.dataList = this.odfData.slice(0, this.size)
    },
    mounted() {
      this.$emit('changeCheckedMore',[])
      const root = document.querySelector('.nodeportbox')
      this.observer = new IntersectionObserver((entries)=>{
       if(entries[0].isIntersecting){
        const arr = this.odfData.slice(this.page * this.size, (this.page + 1) * this.size)
        this.page ++
        this.dataList = this.dataList.concat(arr)
       }
      },{
        root:root,
        threshold:0
      })
      const portItems = document.querySelector('.portmore')
      this.observer.observe(portItems)
    },
    beforeDestroy(){
      // 关闭观察器
      this.observer.disconnect();
      this.observer = null
    },
    methods: {
      handleCheckAllChange(val){
        this.checkedList.forEach((item,index) => {
          this.checkedList[index]['checked'] = val
        })
        this.checkedMore = this.checkedList.filter(item => item.checked)
        this.$emit('changeCheckedMore',this.checkedMore)
      },
      handleCheckedPortChange(val,holeId){
        const checkAll = this.checkedList.some(item => !item.checked)
        if(checkAll){
          this.$emit('changecheckAll')
        }
        this.checkedList.forEach(item => {
          if(item.holeId === holeId){
            item.checked = val
          }
        })
        this.checkedMore = this.checkedList.filter(item => item.checked)
        this.$emit('changeCheckedMore',this.checkedMore)
      },
      handleScroll() {
        const scrollTop = parseInt(this.$refs.box.scrollTop)
        if (Math.abs(scrollTop - this.offset) > this.rowHeight) {
          this.offset = scrollTop
        }
      },
      resize(dialogHeight) {
        this.height = dialogHeight - 54 - 58 - 60
        console.log('this.height', this.height)
        const width = this.$refs.mainBox.clientWidth
        this.rowCount = Math.floor(width / 255)
      }
    }
  }
</script>
<style lang="scss">
  .flange-port {
    .w-60{
      width: 60px;
    }
    .w-85{
      width: 85px;
    }
    .ww-110{
      width:110px;
    }
    .main-box {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .checkAll{
      height:30px;
      position: sticky;
      top: 0;
      left:0;
      box-shadow: none;
      border:0;
    }

    .port-item {
      display: flex;
      align-items: center;

      .sort {
        width: 40px;
        text-align: right;
        margin-right: 5px;
      }
      .input {
        width: 100px;
        margin: 0 5px;
      }
      .select {
        width: 85px;
      }
    }

    .face-name {
      text-align: center;
      white-space: pre-wrap;
      word-break: break-all;
    }
  }
</style>
